<template>
	<view class="conter">
		<view v-if="bagList.length != 0">
			<view class="conterone-box" @click="gotoolconsign(item)" v-for="(item, index) in bagList" :key="index">
				<image style="width: 80rpx; height: 80rpx; margin-left: 25%; margin-top: 20%;"
					src="../../static/images/crazy/jinbi.png" mode=""></image>
				<view class="name">
					<!-- {{ item.propName }} -->
					金豆
				</view>
				<view class="number">×{{ item.number }}</view>
			</view>
		</view>
		<view v-if="bagList.length == 0">
			<image style="
	width: 280rpx;
	height: 280rpx;
	margin: 270rpx 220rpx 0;
		" src="../../static/images/fighting.gif" mode=""></image>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	import {
		getMyBackpack
	} from '@/api/collect/collect.js';
	export default {
		data() {
			return {
				bagList: [],
				imgUrl: config.imgUrl
			};
		},
		created() {
			this.getbagList();
		},
		watch: {
			'$route': function(newRoute, oldRoute) {
				// 判断是否是底部导航切换触发的路由变化
				if (newRoute.path !== oldRoute.path) {
					// 在这里执行你的逻辑
					this.getbagList()
				}
			}
		},
		methods: {
			async getbagList() {
				const data = await getMyBackpack();
				this.bagList = data.data;
			},
			gotoolconsign(item) {
				uni.navigateTo({
					url: `/pages/consignment/timesand?id=${item.id}&number=${item.number}&propImg=${item.propImg}&propName=${item.propName}&propId=${item.propId}&onSaleNum=${item.onSaleNum}&hashValue=${item.hashValue}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.conter {
		padding: 20rpx 34.88rpx;

		.conterone-box {
			display: flex;
			flex-direction: column;
			width: 157rpx;
			height: 222rpx;
			text-align: center;
			background: #272C46;
			border-radius: 26rpx;
			opacity: 1;
			border: 2rpx solid rgba(255, 255, 255, 0.2);
			color: #fff;

			img {
				width: 80rpx;
				margin-left: 25%;
				margin-top: 20%;
				height: 80rpx;
				border-radius: 20rpx;
			}

			.name {
				margin: 15rpx 0;
			}

			.number {
				font-size: 20rpx;
			}
		}
	}
</style>